<template>
  <div class="in">
    <div class="tit">
      <div class="ul1">
        <div
          v-for="(item, index) in list"
          :key="index"
          :class="{ sta: ind == index }"
          @click="stab(index)"
        >
          {{ item }}
        </div>
      </div>
      <div class="ul2">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          @change="datepicker"
          :picker-options="pickerOptions"
          class="one"
        >
        </el-date-picker>
        <el-input
          placeholder="请输入搜索内容"
          v-model="input"
          @change="input1"
          clearable
        >
        </el-input>
      </div>
    </div>
    <div class="qie">
      <div class="cai" v-if="table">
        <el-table :data="table" style="width: 100%">
          <el-table-column prop="bianhao" label="订单编号" align="center">
            <template slot-scope="scope">
              <div @click="toxiangqing1(scope.row)" style="cursor: pointer;">
                {{ scope.row.bianhao }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="下单时间" align="center">
          </el-table-column>
          <el-table-column prop="dianname" label="店铺名称" align="center">
          </el-table-column>
          <el-table-column prop="img" label="商品图片" align="center">
            <template slot-scope="scope">
              <img
                class="img1"
                :src="scope.row.img"
                @click="toxiangqing1(scope.row)"
                style="cursor: pointer;"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center">
            <template slot-scope="scope">
              <div @click="toxiangqing1(scope.row)" style="cursor: pointer;">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="guige" label="规格" align="center">
          </el-table-column>
          <el-table-column prop="sum" label="数量" align="center">
          </el-table-column>
          <el-table-column prop="jin" label="金额" align="center">
          </el-table-column>
          <el-table-column prop="zong" label="总价" align="center">
          </el-table-column>
          <el-table-column prop="zuangtai" label="状态" align="center">
            <template slot-scope="scope">
              <span
                class="color2"
                :class="{
                  color1: scope.row.zuangtai == 1,
                  color3: scope.row.zuangtai == 6
                }"
                >{{
                  scope.row.zuangtai == 1
                    ? "待付款"
                    : scope.row.zuangtai == 3
                    ? "待发货"
                    : scope.row.zuangtai == 4
                    ? "待收货"
                    : scope.row.zuangtai == 7
                    ? "已完成"
                    : "售后"
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="caozuo" label="操作" align="center">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="scope.row.zuangtai != 1"
                    @click.native="xiangqing(scope.$index, scope.row)"
                    >订单详情</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="scope.row.zuangtai != 1"
                    @click.native="xiangqingTo(scope.$index, scope.row)"
                    >物流信息</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="scope.row.zuangtai == 7 && !scope.row.coment"
                    @click.native="pingjia(scope.$index, scope.row)"
                    >去评价</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="scope.row.zuangtai == 1"
                    @click.native="fukaun(scope.$index, scope.row)"
                    >去付款</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="scope.row.zuangtai == 1 || scope.row.zuangtai == 7"
                    fukaun
                    @click.native="del(scope.$index, scope.row)"
                    >删除</el-dropdown-item
                  >

                  <el-dropdown-item
                    v-if="scope.row.zuangtai == 4"
                    @click.native="shouhuo(scope.$index, scope.row)"
                    >确定收货</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="toxiangqing(scope.$index, scope.row)"
                    >商品详情</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <template slot="empty">
            <div style="height:92px;line-height:92px;">暂无订单</div>
          </template>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        prev-text="上一页"
        next-text="下一页"
        class="aut"
      >
      </el-pagination>
    </div>
    <el-dialog title="订单详情" :visible.sync="dialog" class="dialog">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="代付款"></el-step>
        <el-step title="待发货"></el-step>
        <el-step title="待收货"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <div class="zhuangtai">
        <div class="a">
          当前状态：{{
            xiangqing1.status == 1
              ? "待付款"
              : xiangqing1.status == 3
              ? "待发货"
              : xiangqing1.status == 4
              ? "待收货"
              : xiangqing1.status == 7
              ? "已完成"
              : "售后"
          }}
        </div>
        <div class="b">提交订单时间:{{ xiangqing1.create_at }}</div>
      </div>
      <div class="wuliu" v-if="wuliu.messageDO">物流信息</div>
      <div class="wuliu1" v-if="wuliu.messageDO">
        <div class="dizi">
          收货地址：{{ xiangqing1.receiver_name }}，{{
            xiangqing1.receiver_phone
          }}
          {{ xiangqing1.receiver_province }} {{ xiangqing1.receiver_city }}
          {{ xiangqing1.receiver_county }} {{ xiangqing1.receiver_address }}
        </div>
        <div class="list" v-if="active >= 2">
          <div><span>发货方式：</span><span>快递</span></div>
          <div>
            <span>物流公司：</span
            ><span>{{ wuliu.messageDO.name || "无" }}</span>
          </div>
          <div>
            <span>运单号码：</span
            ><span>{{ wuliu.messageDO.expressId || "无" }}</span>
          </div>
          <div><span>物流跟踪：</span><span></span></div>
          <div
            v-for="i in wuliu.messageDO.expressDetailsList || []"
            :key="i.id"
          >
            {{ i.opAt || "" }}:{{ i.message || "" }}
          </div>
        </div>
        <div class="wu" v-else>暂无快递信息</div>
      </div>
      <div class="zhuangtai na">
        <div class="c">
          <div>订单信息</div>
          <div>订单编号:{{ xiangqing1.order_sn }}</div>
          <div>付款时间:{{ xiangqing1.pay_at }}</div>
        </div>
        <div>创建时间:{{ xiangqing1.create_at }}</div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
      >
        <el-table-column prop="img" label="商品图片" align="center">
          <template slot-scope="scope">
            <img class="img2" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center">
        </el-table-column>
        <el-table-column prop="sum" label="数量" align="center">
        </el-table-column>
        <el-table-column prop="jin" label="金额" align="center">
        </el-table-column>
        <el-table-column prop="zong" label="总价" align="center">
        </el-table-column>
        <el-table-column prop="sta" label="状态" align="center">
          <template slot-scope="scope">
            <span
              class="color2"
              :class="{
                color1: scope.row.sta == 1,
                color3: scope.row.sta == 5
              }"
              >{{
                scope.row.sta == 1
                  ? "待付款"
                  : scope.row.sta == 3
                  ? "待发货"
                  : scope.row.sta == 4
                  ? "待收货"
                  : scope.row.sta == 7
                  ? "已完成"
                  : "售后"
              }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="jia">
        <span
          >实付付款：<span>￥{{ xiangqing1.goodsAllPrice }}</span></span
        >
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog = false">确定</el-button>
        <el-button
          type="primary"
          v-if="xiangqing1.status == 4"
          @click="tui(xiangqing1.orderId, xiangqing1.order_sn)"
          plain
          >退款</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="申请退款" :visible.sync="dialog1">
      <el-form :model="form" label-width="100px">
        <el-form-item label="订单编号">
          <el-input v-model="form.jin" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="退款描述">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="form.text"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog1 = false">取 消</el-button>
        <el-button type="primary" @click="tuikuan">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="评价" :visible.sync="dialog2" class="dialog2">
      <div class="pingshang">
        <img class="left" :src="pingjia1.img" alt="" />
        <div class="right">
          <div class="a">{{ pingjia1.name }}</div>
          <div class="b">{{ pingjia1.guige }}</div>
          <div class="block">
            <span class="demonstration">商品描述：</span>
            <el-rate v-model="form2.fen" :colors="colors"> </el-rate>
          </div>
        </div>
      </div>
      <el-input
        type="textarea"
        class="text"
        placeholder="亲，写点评价吧，你的评价对其他买家有很大帮助的。"
        :rows="4"
        v-model="form2.text"
      ></el-input>
      <div class="a">
        <el-upload
          :action="url"
          list-type="picture-card"
          :before-upload="beforeUpload"
          :limit="5"
          :on-exceed="exceed"
          :on-success="uploadSuccess"
          :accept="'image/*'"
          :on-remove="fileRemove"
          :multiple="true"
          class="b"
        >
          <img class="addimg" src="@/assets/img/add.png" alt="" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" class="c">
          <img class="d" width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog2 = false">取 消</el-button>
        <el-button type="primary" @click="pingjia2">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 物流信息 -->
    <el-dialog title="物流详情" :visible.sync="dialog5" class="dialog">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="代付款"></el-step>
        <el-step title="待发货"></el-step>
        <el-step title="待收货"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog5 = false">确定</el-button>
        <el-button
          type="primary"
          v-if="xiangqing1.status == 4"
          @click="tui(xiangqing1.orderId, xiangqing1.order_sn)"
          plain
          >退款</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      allPrice: null,
      payNum: null,
      ind: 0,
      list: ["全部", "待付款", "待发货", "待收货", "已完成", "退款售后"],
      page: 1,
      input: "", //搜索内容
      value2: "", //选择时间
      total: 0, //订单列表数量
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      table: [],
      dialog: false,
      dialog1: false,
      dialog2: false,
      dialog3: false, //开发票
      radio: "1", //支付方式
      dialog4: false, //支付弹框
      dialog5: false, // 物流信息
      zifu1: {}, //选择支付的对象
      item1: {},
      tableData: [
        {
          img:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          name: "DJ3E全电脑三臂凿岩台车",
          sum: "1",
          zong: "$100",
          jin: "$100",
          sta: "1"
        }
      ],
      form: {
        jin: "100",
        text: ""
      },
      form2: {
        fen: 0,
        text: "",
        imageList: []
      },
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      dialogImageUrl: "",
      dialogVisible: false,
      xiangqing1: {}, //详情弹框内容
      active: 0, //详情步骤
      wuliu: {}, //详情物流信息
      pingjia1: {}, //评价对象
      url: "" //图片上传路径
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.list1(0);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.url = `${this.$baseUrl}/api/common/upload`;
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    async xiangqingTo(a, b) {
      this.dialog5 = true;
      let res = await this.$postRequest("/api/order/getOrderById", {
        userId: localStorage.getItem("userId"),
        orderId: b.id
      });
      console.log(res.data);
      this.active = Number(
        res.data.status == "1"
          ? "1"
          : res.data.status == "3"
          ? "2"
          : res.data.status == "4"
          ? "3"
          : res.data.status == "7"
          ? "4"
          : ""
      );
    },
    // 获取订单列表
    list1() {
      this.$postRequest("/api/order/getOrderList", {
        userId: localStorage.getItem("userId"),
        pageNum: this.page,
        type: this.ind,
        name: this.input,
        orderAt: this.value2,
        pageSize: "10",
        status: "1"
      }).then(res => {
        let table = res.data.list.map(item => {
          console.log(item);
          return {
            bianhao: item.order_sn,
            date: item.create_at,
            dianname: item.shopName,
            payNum: item.payNum,
            img: item.detailList[0].imgurl,
            name: item.detailList[0].goodName,
            guige: item.detailList[0].spec,
            sum: item.detailList[0].total,
            zong: "￥" + item.detailList[0].all_price,
            jin: "￥" + item.detailList[0].price,
            zuangtai: item.status,
            id: item.id,
            coment: item.coment,
            detailId: item.detailList[0].detailId,
            payment: item.payment,
            order_sn: item.order_sn,
            goodId: item.detailList[0].goodId
          };
        });
        this.table = table;
        this.total = res.data.total;
      });
    },
    // 选择日期
    datepicker(e) {
      // console.log(e, this.value2)
      this.list1();
    },
    // 搜索
    input1(e) {
      this.list1();
      // console.log(e, this.input)
    },
    stab(i) {
      this.ind = i;
      this.list1();
    },
    // 删除
    async del(a, b) {
      console.log(a, b);
      let res = await this.$postRequest("/api/order/removeOrder", {
        userId: localStorage.getItem("userId"),
        orderIdList: [b.id]
      });
      console.log(res);
      if (res.code == 0) {
        this.table.splice(a, 1);
        this.$message.success("删除成功");
      } else {
        this.$message.error("获取数据失败");
      }
    },
    async shouhuo(a, b) {
      console.log(a, b);
      let res = await this.$postRequest("/api/order/setStatusOrder", {
        userId: localStorage.getItem("userId"),
        orderId: b.id,
        type: "7"
      });
      console.log(res);
      if (res.code == 0) {
        this.list1(this.ind);
        this.$message.success("确定收货成功");
      } else {
        this.$message.error("获取数据失败");
      }
    },
    // 评价弹框
    pingjia(a, b) {
      this.dialog2 = true;
      console.log(a, b);
      this.pingjia1 = b;
    },
    // 评价
    async pingjia2() {
      let form2 = this.form2;
      if (form2.fen == 0) {
        this.$message.error(
          "亲，请给商品评星,你的评星对其他买家有很大帮助的。"
        );
        //  this.$message.success(res.msg)
      } else if (form2.text.length == 0) {
        this.$message.error("亲，写点评价吧，你的评价对其他买家有很大帮助的。");
      } else {
        let d = {
          userId: localStorage.getItem("userId"),
          orderId: this.pingjia1.id,
          comentList: [
            {
              start: form2.fen,
              imgurls: form2.imageList.toString(),
              content: form2.text,
              detailId: this.pingjia1.detailId
            }
          ]
        };
        let res = await this.$postRequest("/api/order/setComent", d);
        console.log(res);
        this.form2 = {
          fen: 0,
          text: "",
          imageList: []
        };
        this.list1(this.ind);
        this.dialog2 = false;
      }
    },
    async xiangqing(a, b) {
      console.log(a, b);
      let res = await this.$postRequest("/api/order/getOrderById", {
        userId: localStorage.getItem("userId"),
        orderId: b.id
      });
      this.active = Number(
        res.data.status == "1"
          ? "1"
          : res.data.status == "3"
          ? "2"
          : res.data.status == "4"
          ? "3"
          : res.data.status == "7"
          ? "4"
          : ""
      );
      console.log(res.data);
      this.xiangqing1 = res.data;
      this.tableData = res.data.goodsList.map(a => {
        return {
          img: a.imgurl,
          name: a.goodsName,
          sum: a.total,
          zong: res.data.goodsAllPrice,
          jin: a.goodsPrice,
          sta: res.data.status
        };
      });
      // console.log('active', this.active)
      this.dialog = true;
      if (this.active >= 2) {
        let res1 = await this.$postRequest("/api/shopExpress/express/message", {
          userId: localStorage.getItem("userId"),
          orderId: b.id
        });
        console.log("aaaaa", res1);
        this.wuliu = res1.data;
      } else {
        this.wuliu = {};
      }
    },
    toxiangqing1(a) {
      console.log(a);
      var Detail = this.$router.resolve({
        path: "/home/detail",
        query: { id: a.goodId }
      });
      window.open(Detail.href, "_blank");
    },
    toxiangqing(a, b) {
      var Detail = this.$router.resolve({
        path: "/home/detail",
        query: { id: b.goodId }
      });
      window.open(Detail.href, "_blank");
    },
    fukaun(a, b) {
      console.log(a, b);
      this.zifu1 = b;
      this.$router.push({
        path: "/pay",
        query: { price: this.zifu1.payment, payNum: this.zifu1.payNum }
      });
    },
    // zifu() {
    //   if (this.radio == 1) {
    //     // console.log(this.zifu1);
    //     // this.allPrice = this.zifu1.payment;
    //     // console.log(this.allPrice);
    //     // this.payNum = this.zifu1.sum;
    //     // console.log(this.payNum);
    //     // 微信支付
    //     this.$router.push({
    //       path: "/pay",
    //       query: { price: this.zifu1.payment, payNum: this.zifu1.payNum }
    //     });
    //     // window.open(Detail.href, "_blank");
    //     // let url = `${this.$baseUrl}/api/wx/toPay.html?price=${this.zifu1.payment}&payNum=${this.zifu1.payNum}`;
    //     // console.log("url", url);
    //     // window.open(url);
    //   } else {
    //     // 支付宝支付
    //     let url = `${this.$baseUrl}/api/ali/toPay.html?price=${this.zifu1.payment}&payNum=${this.zifu1.sum}`;
    //     // console.log("url", url);
    //     window.open(url);
    //   }
    //   // this.dialog4 = false;
    // },
    handleCurrentChange(currentPage) {
      console.log(currentPage); //点击第几页
      window.scrollTo(0, 0);
      this.page = currentPage;
      this.list1(currentPage);
    },
    // 显示退款弹框
    tui(id, id2) {
      this.dialog = false;
      this.id = id;
      this.order = id2;
      this.form = {
        jin: id2,
        text: "",
        id,
        userId: localStorage.getItem("userId")
      };
      this.dialog1 = true;
    },
    async tuikuan() {
      console.log(this.form);
      let form = this.form;
      if (form.text.length > 0) {
        let res = await this.$postRequest("/api/order/backGood", {
          userId: form.userId,
          id: form.id,
          reason: form.text
        });
        // console.log(res)
        this.$message.success(res.msg);
        this.dialog1 = false;
      } else {
        this.$message.error("请输入退款原因！");
      }
    },
    // 文件上传前的钩子，数为上传的文件
    beforeUpload(file) {
      // 判断图片是否大于2M
      const isLt2M = file.size / 1024 / 1024 < 2;
      // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
      // 判断图片的类型
      const isJpg =
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      if (!isJpg) {
        this.$message.error("只能上传jpg, jpeg, png, gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
    },
    // 上传图片超出数量限制时的钩子
    exceed(files, fileList) {
      this.$message.error("最多上传5张图片哦！");
    },
    // 上传成功时的钩子
    uploadSuccess(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.form2.imageList.push(res.data);
      console.log(this.form2.imageList, res.data);
    },
    // 文件列表移除文件时的钩子
    fileRemove(file, fileList) {
      console.log(file, fileList);
      let img = [];
      fileList.forEach(item => {
        img.push(item.response.data.realPath);
      });
      this.form2.imageList = img;
      console.log(this.form2.imageList);
    }
    // fang(file) {
    //   console.log(file)
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // }
  }
};
</script>
<style scoped lang="scss">
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.in {
  width: 100%;
  // height: 840px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .tit {
    width: 100%;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ul1 {
      display: flex;
      height: 100%;
      align-items: center;
      div {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        &.sta {
          color: #1a69e0;
          position: relative;
          &::after {
            content: "";
            width: 100px;
            height: 2px;
            background: #1a69e0;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
    .ul2 {
      display: flex;
      align-items: center;
      position: relative;
      top: -56px;
      .one {
        padding-right: 20px;
      }
    }
  }
  /deep/ .el-date-editor.el-input {
    width: 270px;
    .el-input__suffix {
      right: 25px;
    }
  }
  .qie {
    .img1 {
      width: 50px;
      height: 50px;
    }
    /deep/ .el-button + .el-button {
      margin-top: 4px;
    }
    /deep/ .el-button + .el-button {
      margin-left: 0px;
    }
    .aut {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 14px;
    }
    /deep/ .el-pagination button,
    .el-pagination span:not([class*="suffix"]) {
      width: 60px;
    }
    .color2 {
      color: #1a69e0;
    }
    .color1 {
      color: #f0740f;
    }
    .color3 {
      color: #e01a1a;
    }
  }
  .dialog {
    /deep/ .el-step__main {
      height: 32px;
      .el-step__title {
        font-size: 14px;
        line-height: 34px;
      }
    }
    .zhuangtai {
      width: 100%;
      background: #f9f9f9;
      border: 1px solid #eeeeee;
      padding: 20px;
      margin-top: 20px;
      &.na {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 20px;
        margin: 10px 0;
      }
      .a {
        height: 16px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
      }
      .b {
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 20px;
        margin-top: 8px;
      }
    }
    .wuliu {
      height: 36px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 36px;
    }
    .wuliu1 {
      width: 100%;
      max-height: 260px;
      background: #f9f9f9;
      border: 1px solid #eeeeee;
      padding: 20px;
      overflow-y: auto;
      .dizi {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        margin-bottom: 18px;
      }
      .list {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 20px;
      }
    }
    .img2 {
      width: 50px;
      height: 50px;
    }
    .jia {
      height: 36px;
      line-height: 36px;
      text-align: right;
      & > span {
        margin-right: 20px;
        span {
          font-size: 18px;
          color: #ff0000;
        }
      }
    }
    .di {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 36px;
    }
  }
  .dialog2 {
    /deep/ .el-dialog__header {
      padding: 20px;
      border-bottom: 1px solid #eeeeee;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-rate__icon {
      font-size: 22px;
    }
    .pingshang {
      display: flex;
      justify-content: center;
      align-items: center;
      .left {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        border: 1px solid #eee;
      }
      .right {
        flex: 1;
        .a {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 20px;
          margin-bottom: 10px;
        }
        .b {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 20px;
          margin-bottom: 14px;
        }
        .block {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .text {
    margin: 30px 0 20px;
  }
  .a {
    width: 100%;
    .addimg {
      width: 110px;
      height: 110px;
      border-radius: 4px;
    }
    .b {
      /deep/ .el-upload--picture-card {
        background-color: #fbfdff;
        border-radius: 6px;
        box-sizing: border-box;
        width: 110px;
        height: 110px;
        border: none;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item {
        width: 110px;
        height: 110px;
        border: none;
        border-radius: 4px;
      }
    }
  }
}
</style>